<!doctype html>
<html>
	<head>
		<style>
			table{border:1px solid red}
			td{width:100px;height:30px}
			/*第一行*/
			tr:nth-child(3) td:nth-of-type(1){background:hsl(120,100%,100%)}
			tr:nth-child(3) td:nth-of-type(2){background:hsl(120,75%,100%)}
			tr:nth-child(3) td:nth-of-type(3){background:hsl(120,50%,100%)}
			tr:nth-child(3) td:nth-of-type(4){background:hsl(120,25%,100%)}
			tr:nth-child(3) td:nth-of-type(5){background:hsl(120,0%,100%)}
			/*第二行*/
			tr:nth-child(4) td:nth-of-type(1){background:hsl(120,100%,88%)}
			tr:nth-child(4) td:nth-of-type(2){background:hsl(120,75%,88%)}
			tr:nth-child(4) td:nth-of-type(3){background:hsl(120,50%,88%)}
			tr:nth-child(4) td:nth-of-type(4){background:hsl(120,25%,88%)}
			tr:nth-child(4) td:nth-of-type(5){background:hsl(120,0%,88%)}
			/*第三行*/
			tr:nth-child(5) td:nth-of-type(1){background:hsl(120,100%,75%)}
			tr:nth-child(5) td:nth-of-type(2){background:hsl(120,75%,75%)}
			tr:nth-child(5) td:nth-of-type(3){background:hsl(120,50%,75%)}
			tr:nth-child(5) td:nth-of-type(4){background:hsl(120,25%,75%)}
			tr:nth-child(5) td:nth-of-type(5){background:hsl(120,0%,75%)}
			/*第四行*/
			tr:nth-child(6) td:nth-of-type(1){background:hsl(120,100%,63%)}
			tr:nth-child(6) td:nth-of-type(2){background:hsl(120,75%,63%)}
			tr:nth-child(6) td:nth-of-type(3){background:hsl(120,50%,63%)}
			tr:nth-child(6) td:nth-of-type(4){background:hsl(120,25%,63%)}
			tr:nth-child(6) td:nth-of-type(5){background:hsl(120,0%,63%)}
			/*第五行*/
			tr:nth-child(7) td:nth-of-type(1){background:hsl(120,100%,50%)}
			tr:nth-child(7) td:nth-of-type(2){background:hsl(120,75%,50%)}
			tr:nth-child(7) td:nth-of-type(3){background:hsl(120,50%,50%)}
			tr:nth-child(7) td:nth-of-type(4){background:hsl(120,25%,50%)}
			tr:nth-child(7) td:nth-of-type(5){background:hsl(120,0%,50%)}
			/*第六行*/
			tr:nth-child(8) td:nth-of-type(1){background:hsl(120,100%,38%)}
			tr:nth-child(8) td:nth-of-type(2){background:hsl(120,75%,38%)}
			tr:nth-child(8) td:nth-of-type(3){background:hsl(120,50%,38%)}
			tr:nth-child(8) td:nth-of-type(4){background:hsl(120,25%,38%)}
			tr:nth-child(8) td:nth-of-type(5){background:hsl(120,0%,38%)}
			/*第七行*/
			tr:nth-child(9) td:nth-of-type(1){background:hsl(120,100%,25%)}
			tr:nth-child(9) td:nth-of-type(2){background:hsl(120,75%,25%)}
			tr:nth-child(9) td:nth-of-type(3){background:hsl(120,50%,25%)}
			tr:nth-child(9) td:nth-of-type(4){background:hsl(120,25%,25%)}
			tr:nth-child(9) td:nth-of-type(5){background:hsl(120,0%,25%)}
			/*第八行*/
			tr:nth-child(10) td:nth-of-type(1){background:hsl(120,100%,13%)}
			tr:nth-child(10) td:nth-of-type(2){background:hsl(120,75%,13%)}
			tr:nth-child(10) td:nth-of-type(3){background:hsl(120,50%,13%)}
			tr:nth-child(10) td:nth-of-type(4){background:hsl(120,25%,13%)}
			tr:nth-child(10) td:nth-of-type(5){background:hsl(120,0%,13%)}
			/*第九行*/
			tr:nth-child(11) td:nth-of-type(1){background:hsl(120,100%,0%)}
			tr:nth-child(11) td:nth-of-type(2){background:hsl(120,75%,0%)}
			tr:nth-child(11) td:nth-of-type(3){background:hsl(120,50%,0%)}
			tr:nth-child(11) td:nth-of-type(4){background:hsl(120,25%,0%)}
			tr:nth-child(11) td:nth-of-type(5){background:hsl(120,0%,0%)}
		</style>
	</head>
	<body>
		<table border="1">
			<tbody>
				<tr>
					<th colspan="6">色调=120（绿色）</th>
				</tr>
				<tr>
					<th>亮度↓/饱和度→</th>
					<th>100%</th>
					<th>75%</th>
					<th>50%</th>
					<th>25%</th>
					<th>0%</th>
				</tr>
				<tr>
					<th>100%</th>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<th>88%</th>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<th>75%</th>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<th>63%</th>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<th>50%</th>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<th>38%</th>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<th>25%</th>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<th>13%</th>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<th>0%</th>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>